<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body,
			ul,
			li,
			h2 {
				margin: 0;
				padding: 0;
			}
			
			li {
				list-style: none;
			}
			.list>div {
				margin-bottom: 10px;
			}
			.list .show {
				display: block;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="./css/qq.css" />
		<script src="../src/vue.js"></script>
	</head>

	<body onselectstart="return false;">
		<div class="wrap" id="app">
			<div class="list">
				<div v-for="item,i in QQFriends">
					<h2 
						@click="showIndex = i"
						:style="{background: showIndex === i ? 'red' : ''}"
					>
						<span></span>{{item.title}}
					</h2>
					<ul :style="{display: showIndex === i ? 'block' : 'none'}">
						<li v-for="option in item.list">{{option.newsTitle}}</li>
					</ul>
				</div>
			</div>
		</div>
		<script>

			let data = [
				{
					title: '我的好友',
					list: [
						{
							newsTitle: '新闻版块1'
						},
						{
							newsTitle: '新闻版块2'
						},
						{
							newsTitle: '新闻版块3'
						}
					]
				},
				{
					title: '黑名单',
					list: [
						{
							newsTitle: '娱乐版块1'
						},
						{
							newsTitle: '娱乐版块2'
						},
						{
							newsTitle: '娱乐版块3'
						}
					]
				},
				{
					title: '我的家人',
					list: [
						{
							newsTitle: '体育版块1'
						},
						{
							newsTitle: '体育版块2'
						},
						{
							newsTitle: '体育版块3'
						}
					]
				}
			];

			new Vue({
				el: '#app',
				data: {
					QQFriends: data,
					showIndex: -1
				}
			})

		</script>
	</body>

</html>